<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="(item, index) in gridColumns" :key="index">
            {{ item.name }}
            <span
              class="arrow"
              v-show="item.hasOwnProperty('isAsc')"
              :class="item.isAsc ? 'asc' : 'dsc'"
              @click="sortFn(item)"
            >
            </span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in newList" :key="index">
          <td v-for="(i, v) in gridColumns" :key="v">
            {{ item[i.name] }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: ["gridData", "gridColumns", "val"],
  methods: {
    sortFn(item) {
      if (!item.hasOwnProperty("isAsc")) {
        return;
      } else {
        item.isAsc = !item.isAsc;
      }
      // console.log(typeof this.gridData[0][item.name])
      if (typeof this.gridData[0][item.name] == "string") {
        if (item.isAsc) {
          this.gridData.sort((v, i) => {
            if (v[item.name] > i[item.name]) {
              return 1;
            } else if (v[item.name] < i[item.name]) {
              return -1;
            } else {
              return 0;
            }
          });
        } else {
          this.gridData.reverse();
        }
      }
      if (typeof this.gridData[0][item.name] == "number") {
        if (item.isAsc) {
          this.gridData.sort((v, i) => {
            return v[item.name] - i[item.name];
          });
        } else {
          this.gridData.reverse();
        }
      }
    },
  },
  computed: {
    newList() {
      if (!this.val) {
        return this.gridData;
      } else {
        return this.gridData.filter((val) => {
          return val.name.toUpperCase().indexOf(this.val.toUpperCase()) != -1;
        });
      }
    },
  },
};
</script>

<style scoped>
body {
  font-family: Helvetica Neue, Arial, sans-serif;
  font-size: 14px;
  color: #444;
}

table {
  border: 2px solid #42b983;
  border-radius: 3px;
  background-color: #fff;
}

th {
  background-color: #42b983;
  color: rgba(255, 255, 255, 0.66);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

td {
  background-color: #f9f9f9;
}

th,
td {
  min-width: 120px;
  padding: 10px 20px;
}

th.active {
  color: #fff;
}

th.active .arrow {
  opacity: 1;
}

.arrow {
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  margin-left: 5px;
  opacity: 0.66;
}

.arrow.asc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #fff;
}

.arrow.dsc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #fff;
}
</style>
